@extends("admin.framework.layouts.main")
@push('styles')
    <style>
        /* 控制台风格 */
        .home{
            overflow: hidden;
            background-color: var(--headerBackground);
            color: var(--headerTextColors);
        }
        .home-layout{
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        .home-header{
            box-sizing: border-box;
            display: flex;
            width: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            padding: 12px;
        }
        .home-head-img{
            -webkit-box-flex: 1;
            -ms-flex: auto;
            flex: auto;
            box-sizing: border-box;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
        .home-head-img .avatar{
            -webkit-box-flex: 0;
            -ms-flex: 0 1 72px;
            flex: 0 1 72px;
        }
        .home-head-img .avatar>span{
            display: block;
            width: 72px;
            height: 72px;
            border-radius: 72px;
            background: transparent;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-variant: tabular-nums;
            line-height: 1.5;
            list-style: none;
            -webkit-font-feature-settings: "tnum";
            font-feature-settings: "tnum";
            position: relative;
            overflow: hidden;
            white-space: nowrap;
            text-align: center;
            vertical-align: middle;
        }
        .home-head-img .content{
            position: relative;
            top: 4px;
            margin-left: 24px;
            line-height: 22px;
            color: rgba(0,0,0,.45);
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
        }
        .home-head-img .content .content-title{
            margin-bottom: 12px;
            font-size: 20px;
            font-weight: 500;
            line-height: 28px;
            color: rgba(0,0,0,.85);
        }
        .home-head-img .content .content-info{
            line-height: 22px;
            color: rgba(0,0,0,.45);
        }
        .home-label-data{
            min-width: 242px;
            margin-left: 88px;
            text-align: right;
            -webkit-box-flex: 0;
            -ms-flex: 0 1 auto;
            flex: 0 1 auto;
            box-sizing: border-box;
        }
        .home-layout .layout-content{
            zoom: 1;
            float: right;
            white-space: nowrap;
        }
        .home-layout .layout-content:after{
            height: 0;
            clear: both;
            font-size: 0;
            visibility: hidden;
        }
        .home-layout .layout-content .stat-item{
            position: relative;
            display: inline-block;
            padding: 0 32px;
        }
        .home-layout .layout-content .stat-item:after{
            position: absolute;
            top: 8px;
            right: 0;
            width: 1px;
            height: 40px;
            background-color: #e8e8e8;
            content: "";
        }
        .ant-statistic{
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            color: rgba(0,0,0,.65);
            font-size: 14px;
            font-variant: tabular-nums;
            line-height: 1.5;
            list-style: none;
            -webkit-font-feature-settings: "tnum";
            font-feature-settings: "tnum";
        }
        .ant-statistic-title{
            margin-bottom: 4px;
            color: rgba(0,0,0,.45);
            font-size: 14px;
        }
        .ant-statistic-content{
            font-variant: tabular-nums;
            line-height: 1.5;
            list-style: none;
            color: rgba(0,0,0,.85);
            font-size: 24px;
            font-family: -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
        }
        @media screen and (max-width: 1000px){
            .home-header{
                box-sizing: border-box;
                display: block !important;
                width: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                padding: 12px;
            }
            .home-label-data{
                margin-left: 0;
            }
        }
        @media screen and (max-width: 500px){
            .home-header{
                box-sizing: border-box;
                display: block !important;
                width: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                padding: 12px;
            }
            .home-label-data{
                margin-left: 0;
            }
            .home-head-img .content .content-title{
                font-size: 14px;
            }
            .home-head-img .content .content-info{
                font-size: 12px;
            }
            .home-layout .layout-content .stat-item{
                padding: 0 22px;
            }
        }
        /* 控制台风格 end */

        /* card */
        .text {
            font-size: 12px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,.clearfix:after {
            display: table;
            content: "";
        }
        .clearfix:after {
            clear: both
        }
        /* card end */

        .setting-body{
            overflow: hidden;
            margin: 10px 0;
        }
        .col-gutter{
            margin-bottom: 10px;
        }
        .setting-amount-ic{
            font-size: 36px;
        }
        .setting-amount-val{
            font-size: 32px;
        }
        .chart-top {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }
        /* 访问数据风格 */
        .visit-style{
            width: 100%;
            display: block;
            overflow: hidden;
        }
        .visit-style .visit-style-border{
            border-right: 1px solid #cccccc;
            margin-right: 16px;
        }
        .visit-style-title{
            height: 40px;
            color: rgba(0, 0, 0, .45);
            font-size: 14px;
        }
        .visit-style-line-title{
            font-variant: tabular-nums;
            line-height: 2.5;
            list-style: none;
            color: rgba(0, 0, 0, .45);
            font-size: 15px;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
        }
        .visit-style-line{
            font-variant: tabular-nums;
            line-height: 1.5;
            list-style: none;
            color: rgba(0, 0, 0, .85);
            font-size: 24px;
            font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
            text-align: left;
        }
        /* 访问数据风格 end. */
    </style>
@endpush
@section("content")
    <div class="home home-header home-layout" v-loading="statistics.loading">
        <div class="home-head-img home-layout">
            <div class="avatar home-layout">
                <span><img src="/statics/v1/images/icon/headimg_02.png"></span>
            </div>
            <div class="content home-layout">
                <div class="content-title">{{hour_type() == 'late_night' ? (hour_chinese() . '了，注意休息') : (hour_chinese() . '好')}}，{{auth ()->guard ('admin')->check() ? auth ()->guard ('admin')->user()->name :''}}。</div>
                <div class="content-info">{!! $settings['login_title'] ?? '' !!} | <span id="time"></span></div>
            </div>
        </div>
        <div class="home-label-data home-layout">
            <div class="layout-content home-layout">
                <div class="stat-item home-layout">
                    <div class="ant-statistic">
                        <div class="ant-statistic-title home-layout">今日访问</div>
                        <div class="ant-statistic-content home-layout">@{{ statistics.data.today }}</div>
                    </div>
                </div>
                <div class="stat-item home-layout">
                    <div class="ant-statistic">
                        <div class="ant-statistic-title home-layout">七日访问</div>
                        <div class="ant-statistic-content home-layout">@{{ statistics.data.sevenDays }}</div>
                    </div>
                </div>
                <div class="stat-item home-layout">
                    <div class="ant-statistic">
                        <div class="ant-statistic-title home-layout">30日访问</div>
                        <div class="ant-statistic-content home-layout">@{{ statistics.data.thirtyDays }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="setting-body">
        <el-row :gutter="10">
            <el-col class="col-gutter" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <el-card class="home" shadow="hover" v-loading="statistics.loading">
                    <div slot="header" class="clearfix">
                        <span>访问数据</span>
                    </div>
                    <div class="text item">
                        <el-row :gutter="10" class="visit-style">
                            <el-col class="col-gutter" :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                                <div class="visit-style-title"></div>
                                <div class="visit-style-line-title">访客数</div>
                                <div class="visit-style-line-title">IP数</div>
                            </el-col>
                            <el-col class="col-gutter visit-style-border" :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                                <div class="visit-style-title">今日</div>
                                <div class="visit-style-line">@{{ statistics.data.userToday }}</div>
                                <div class="visit-style-line">@{{ statistics.data.ipToday }}</div>
                            </el-col>
                            <el-col class="col-gutter visit-style-border" :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                                <div class="visit-style-title">昨日</div>
                                <div class="visit-style-line">@{{ statistics.data.userYesterday }}</div>
                                <div class="visit-style-line">@{{ statistics.data.ipYesterday }}</div>
                            </el-col>
                            <el-col class="col-gutter visit-style-border" :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                                <div class="visit-style-title">7日</div>
                                <div class="visit-style-line">@{{ statistics.data.userSevenDays }}</div>
                                <div class="visit-style-line">@{{ statistics.data.ipSevenDays }}</div>
                            </el-col>
                            <el-col class="col-gutter" :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                                <div class="visit-style-title">30日</div>
                                <div class="visit-style-line">@{{ statistics.data.userThirtyDays }}</div>
                                <div class="visit-style-line">@{{ statistics.data.ipThirtyDays }}</div>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="10">
            <el-col class="col-gutter" :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
                <el-row :gutter="10">
                    <el-col class="col-gutter" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-card class="home" shadow="hover" v-loading="orderBox.loading">
                            <div slot="header" class="clearfix">
                                <span>七日折线图</span>
                                {{--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>--}}
                            </div>
                            <div class="text item">
                                <div class="chart-top chart" ref="chart" style="height: 400px">
                                    <div id="orderBox" style="width:100%;height:100%;"></div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </el-col>
            <el-col class="col-gutter" :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
                <el-row :gutter="10">
                    <el-col class="col-gutter" :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                        <el-card class="home" shadow="hover" v-loading="topList.loading">
                            <div slot="header" class="clearfix">
                                <span>30日城市访问排行（uv）</span>
                                {{--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>--}}
                            </div>
                            <div class="text item">
                                <el-table :data="topList.data" stripe style="width: 100%" height="400">
                                    <el-table-column prop="city" label="名称" align="center" width="180"></el-table-column>
                                    <el-table-column prop="num" label="当月收益" align="center"></el-table-column>
                                    <el-table-column prop="id" label="排名" align="center">
                                        <template slot-scope="scope">
                                            <el-tag type="danger" v-if="scope.$index === 0">第1名</el-tag>
                                            <el-tag type="warning" v-else-if="scope.$index === 1">第2名</el-tag>
                                            <el-tag type="success" v-else-if="scope.$index === 2">第3名</el-tag>
                                            <el-tag type="info" v-else>第@{{ scope.$index + 1 }}名</el-tag>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-card>
                    </el-col>
                    {{--                    <el-col class="col-gutter" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">--}}
                    {{--                        <el-card class="home" shadow="hover">--}}
                    {{--                            <div slot="header" class="clearfix">--}}
                    {{--                                <span>卡片名称</span>--}}
                    {{--                                --}}{{--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>--}}
                    {{--                            </div>--}}
                    {{--                            <div v-for="o in 2" :key="o" class="text item">--}}
                    {{--                                @{{'列表内容 ' + o }}--}}
                    {{--                            </div>--}}
                    {{--                        </el-card>--}}
                    {{--                    </el-col>--}}
                    {{--                    <el-col class="col-gutter" :xs="24" :sm="12" :md="12" :lg="12" :xl="12">--}}
                    {{--                        <el-card class="home" shadow="hover">--}}
                    {{--                            <div slot="header" class="clearfix">--}}
                    {{--                                <span>卡片名称</span>--}}
                    {{--                                --}}{{--<el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>--}}
                    {{--                            </div>--}}
                    {{--                            <div v-for="o in 2" :key="o" class="text item">--}}
                    {{--                                @{{'列表内容 ' + o }}--}}
                    {{--                            </div>--}}
                    {{--                        </el-card>--}}
                    {{--                    </el-col>--}}
                </el-row>
            </el-col>
        </el-row>
    </div>
@endsection
@push('scripts')
    <script src="./statics/home/welcome/time.js"></script>
    <script src="./statics/v1/common/lib/echart/echarts.min.js"></script>
    <script>
        var $App = new Vue({
            el: '#app',
            mixins: [$Config, $Layouts],
            data: {
                isCollapse: false,
                config: {permissions: false, breadcrumb: false, header: false},
                importModel: {dialog: false},
                statistics:{
                    loading:false,
                    data:{
                        today: 0,
                        sevenDays: 0,
                        thirtyDays: 0,
                    }
                },
                topList:{
                    loading:false,
                    data:[]
                },
                orderBox:{
                    loading:false,
                    echarts:{},
                    option:{
                        title: {
                            text: '趋势图'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                label: {
                                    backgroundColor: '#6a7985'
                                }
                            }
                        },
                        legend: {
                            data: ['ip', 'uv', 'pv']
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: []
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: 'IP',
                                type: 'line',
                                // stack: 'Total',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: []
                            },
                            {
                                name: 'UV',
                                type: 'line',
                                // stack: 'Total',
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: []
                            },
                            {
                                name: 'PV',
                                type: 'line',
                                // stack: 'Total',
                                label: {
                                    show: true,
                                    position: 'top'
                                },
                                areaStyle: {},
                                emphasis: {
                                    focus: 'series'
                                },
                                data: []
                            }
                        ]
                    }
                }
            },
            methods: {
                // 获取统计
                getStatistics(){
                    var that = this;
                    that.statistics.loading = true;
                    $Request.postJson('getStatistics', {}, function (res) {
                        that.statistics.loading = false;
                        that.statistics.data = res.result;
                    });
                },

                // 获取排行榜
                getTopList(){
                    var that = this;
                    that.topList.loading = true;
                    $Request.postJson('getTopList', {}, function (res) {
                        that.topList.data = res.result;
                        that.topList.loading = false;
                    });
                },

                // 折线图
                getOrderBox(){
                    var that = this;
                    that.orderBox.loading = true;
                    $Request.postJson('getTrend', {}, function (res) {
                        that.orderBox.option.xAxis[0].data = res.result.dates
                        that.orderBox.option.series[0].data = res.result.ipTrendNum
                        that.orderBox.option.series[1].data = res.result.userTrendNum
                        that.orderBox.option.series[2].data = res.result.pvTrendNum
                        that.orderBox.loading = false;
                        that.orderBox.echarts.setOption(that.orderBox.option)
                        that.resizeChart();
                    });
                },

                // 折线图自适应回调
                handleResize(){
                    var that = this;
                    setTimeout(()=>{
                        that.orderBox.echarts.resize()
                    },300)
                },
                resizeChart(){
                    var that = this;
                    window.addEventListener('resize', () => {
                        // 第六步，执行echarts自带的resize方法，即可做到让echarts图表自适应
                        that.orderBox.echarts.resize()
                        // 如果有多个echarts，就在这里执行多个echarts实例的resize方法,不过一般要做组件化开发，即一个.vue文件只会放置一个echarts实例
                    })
                }
                // 折线图自适应回调 end
            },
            created() {
                var that = this;
                that.getStatistics();
                that.getTopList();
            },
            mounted() {
                var that = this;
                that.orderBox.echarts = echarts.init(document.getElementById('orderBox'));
                that.getOrderBox();
            }
        })
    </script>
@endpush